<template>
  <div class="app-container">
    <div class="shopOrder-dialog">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>企业信息</span>
              <el-button style="float: right;" size="mini" type="primary" @click="companyOk">修改保存</el-button>
            </div>
            <div class="card_top30">
              <el-form ref="ruleForm" :model="formData" label-width="140px">
                <el-form-item label="企业名称" prop="companyname">
                  <el-input v-model="formData.companyname" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="credit_code">
                  <el-input v-model="credit_code" style="width: 80%;" />
                </el-form-item>
                <el-form-item label="企业性质" prop="nature_name">
                  <el-input v-model="formData.nature_name" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="行业分类" prop="trade_name">
                  <el-input v-model="formData.trade_name" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="企业规模" prop="scale_name">
                  <el-input v-model="formData.scale_name" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="注册资金" prop="registered">
                  <el-input v-model="formData.registered" style="width: 50%;" disabled />
                  <div style="display: inline-block;"><el-input value="万人民币" disabled style="width: 80%;" /></div>
                </el-form-item>
                <el-form-item label="企业福利" prop="tag_list">
                  <el-input v-model="listStr" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="所在地区" prop="address">
                  <el-input v-model="address" style="width: 80%;" disabled />
                </el-form-item>
              </el-form>
            </div>
          </el-card>

        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>联系方式</span>
            </div>
            <div class="card_top30">
              <el-form ref="ruleForm" :model="contact" label-width="100px">
                <el-form-item label="联系人" prop="contact">
                  <el-input v-model="contact.contact" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile">
                  <el-input v-model="contact.mobile" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="联系微信" prop="weixin">
                  <el-input v-model="contact.weixin" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="联系固话" prop="telephone">
                  <el-input v-model="contact.telephone" style="width: 80%;" disabled />
                </el-form-item>
                <el-form-item label="联系邮箱" prop="email">
                  <el-input v-model="contact.email" style="width: 80%;" disabled />
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px;" :gutter="20">
        <el-col :span="14">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>实习基地信息</span>
              <el-button v-if="formData.is_practice===0" style="float: right;" plain size="mini" disabled type="info">未认证</el-button>
              <el-button v-if="formData.is_practice===1" style="float: right;" plain size="mini" disabled type="success">已认证</el-button>
              <el-button v-if="formData.is_practice===2" style="float: right;" plain size="mini" disabled type="danger">未通过</el-button>
              <el-button v-if="formData.is_practice===3" style="float: right;" plain size="mini" disabled type="warning">审核中</el-button>
            </div>
            <div class="card_top30">
              <div class="fujian-box">
                <label>下载附件：</label>
                <div class="a-top item-xbox">
                  <div class="item-fujian d-j-a" @click="dowBtn(imgUrl)">
                    <div class="item-img">
                      <img v-if="imgUrl.name=='.pdf'" src="https://x.blnews.com.cn/file/jintaiimg/PDF.png">
                      <img v-if="imgUrl.name=='.xlsx'||imgUrl.name=='.xls'||imgUrl.name=='.csv'" src="https://x.blnews.com.cn/file/jintaiimg/excel.png">
                      <img v-if="imgUrl.name=='.doc'||imgUrl.name=='.docx'" src="https://x.blnews.com.cn/file/jintaiimg/word.png">
                    </div>
                    <div class="item-title">{{ imgUrl.url|getFileName }}</div>
                  </div>
                </div>
              </div>
              <el-form ref="ruleForm" :model="attestation" :rules="rules" label-width="140px">
                <el-form-item label="基地申请表" prop="application_form">
                  <ImageUpload ref="application_form" :is-true="isFile" />
                </el-form-item>
                <el-form-item label="税收完税证明" prop="tax_revenue">
                  <ImagesListUpload ref="tax_revenue" :is-true="isFile" />
                </el-form-item>
                <el-form-item label="生活补贴发放明细" prop="subsidy">
                  <ImagesListUpload ref="subsidy" :is-true="isFile" />
                </el-form-item>
                <el-form-item label="实习岗位需求" prop="requirements">
                  <ImageUpload ref="requirements" :is-true="isFile" />
                </el-form-item>
                <el-form-item label="带教师资信息" prop="teachers">
                  <ImageUpload ref="teachers" :is-true="isFile" />
                </el-form-item>
              </el-form>
              <div class="btn_ljm_box">
                <el-button v-if="formData.is_practice===0" type="primary" @click="btnOk('add')">申请认证</el-button>
                <el-button v-if="formData.is_practice>0&&isFile" @click="editOk(1)">修改/变更</el-button>
                <el-button v-if="formData.is_practice>0&&!isFile" @click="editOk(2)">取消修改</el-button>
                <el-button v-if="formData.is_practice>0&&!isFile" type="primary" @click="btnOk('edit')">修改/变更认证</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基地认证结果</span>
              <el-button v-if="attest_list[0].status===0" style="float: right;" plain size="mini" disabled type="info">待审核</el-button>
              <el-button v-else-if="attest_list[0].status===1" style="float: right;" plain size="mini" disabled type="success">审核通过</el-button>
              <el-button v-else-if="attest_list[0].status===2" style="float: right;" plain size="mini" disabled type="danger">未通过</el-button>
            </div>
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item v-for="(item,index) in attest_list" :key="index" :name="index">
                <template slot="title">
                  <i v-if="item.status===1" class="el-icon-success " style="color: #67C23A;margin-right:5px" />
                  <i v-if="item.status===2" class="el-icon-error" style="color: #F56C6C;margin-right:5px" />
                  {{ item.type|auditingType }}{{ item.status|auditingStatus }}
                  <label class="black73-zt label_title">{{ item.updated_at|timeStanp }}</label>
                </template>
                <div>{{ item.reason }}</div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import { GetCompany, AttestationAdd, GetAdminSet, GetAttestationInfo, EditCompany, GetAttestList } from '@/api/user'
import user from '@/store/modules/user'
export default {
  data() {
    return {
      activeName: undefined,
      downloadLoading: false,
      count: 0,
      credit_code: '',
      query: {
        bid: undefined
      },
      showDialog: false,
      dialogTitle: this.$t('table.addRole'),
      formData: {},
      info: {},
      contact: {},
      attestation: {
        application_form: '',
        tax_revenue: '',
        subsidy: '',
        teachers: '',
        requirements: '',
        type: undefined,
        comid: undefined,
        uid: undefined,
        status: 0

      },
      rules: {
        application_form: [{ required: true, message: '基地申请表' + this.$t('prompt.noEmpty'), trugger: 'blur' }],
        tax_revenue: [{ required: true, message: '税收完税证明' + this.$t('prompt.noEmpty'), trugger: 'blur' }],
        subsidy: [{ required: true, message: '生活补贴发放明细' + this.$t('prompt.noEmpty'), trugger: 'blur' }]
      },
      listStr: '',
      address: '',
      defaultProps: {
        label: 'name'
      },
      adminInfo: {},
      imgUrl: { url: '', name: '' },
      isFile: false,
      attest_list: [
        { status: 0 }
      ]
    }
  },
  created() {
    this.query.bid = parseInt(user.state.userInfo.bid)
    this.getGroup()
    this.getMenu()
    this.getAttestation()
    this.getAttestList()
  },
  methods: {
    // 获取审核列表
    async getAttestList() {
      const one = {
        bid: this.query.bid,
        page: 1,
        limit: 30
      }
      const { list } = await GetAttestList(one)
      if (list.length > 0) {
        this.attest_list = list
      }
    },
    // 企业信息修改
    async companyOk() {
      const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/
      if (this.credit_code === '') {
        this.$message.error('统一社会信用代码不能为空！')
        return
      }
      if (!reg.test(this.credit_code)) {
        this.$message.error('统一社会信用代码格式不正确！')
        return
      }
      this.formData.credit_code = this.credit_code
      try {
        await this.$confirm('确定要修改公司资料吗？')
        await EditCompany(this.formData)
        this.getGroup()
        this.$message.success('成功！')
      } catch (error) {
        this.$message.error('失败！')
      }
    },
    editOk(e) {
      if (e === 1) {
        this.isFile = false
      } else {
        this.isFile = true
      }
    },
    async dowBtn(row) {
      await this.$confirm('确定要下载该附件吗？')
      const a = document.createElement('a') // 创建一个a标签
      a.href = row.url // 设置a标签的href属性为临时URL
      a.click() // 模拟点击a标签进行下载
      this.$message.success('下载成功！')
    },
    // 获取认证信息
    async getAttestation() {
      var param = {
        bid: this.query.bid
      }
      const list = await GetAttestationInfo(param)
      if (list.id > 0) {
        this.isFile = true
        this.attestation = list
        this.openDialog()
      }
    },
    // 获取列表
    async getGroup() {
      this.downloadLoading = true
      const { data, tag_list, info, contact } = await GetCompany(this.query)
      this.formData = data
      this.info = info
      this.contact = contact
      this.credit_code = this.formData.credit_code
      if (tag_list.length > 0) {
        this.listStr = tag_list.join(',')
      }
      this.address = data.district1_name + data.district2_name + data.district_name
      this.downloadLoading = false
    },
    // 确定提交
    async btnOk(type) {
      if (this.formData.credit_code === '' && this.credit_code !== '') {
        this.$message.error('请先保存统一社会信用代码！')
        return
      }
      const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/
      if (this.formData.credit_code === '') {
        this.$message.error('统一社会信用代码不能为空！')
        return
      }
      if (!reg.test(this.formData.credit_code)) {
        this.$message.error('统一社会信用代码格式不正确！')
        return
      }
      if (type === 'add') {
        this.attestation.type = 1
        this.attestation.comid = this.formData.id
      } else {
        if (this.attestation.status === 1) {
          this.attestation.type = 2
        }
      }
      this.attestation.uid = parseInt(user.state.userId)
      this.attestation.mid = undefined
      this.attestation.status = 0
      this.attestation.id = undefined
      this.attestation.reason = ''
      try {
        // 读取上传组件的数据
        const fileList = this.$refs.application_form.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const application_form = []
        for (let i = 0; i < fileList.length; i++) {
          application_form.push(fileList[i].url)
        }
        this.attestation.application_form = application_form.toString(',')
        // 读取上传组件的数据
        const fileList1 = this.$refs.tax_revenue.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const tax_revenue = []
        for (let i = 0; i < fileList1.length; i++) {
          tax_revenue.push(fileList1[i].url)
        }
        this.attestation.tax_revenue = tax_revenue.toString(',')
        // 读取上传组件的数据
        const fileList2 = this.$refs.subsidy.fileList
        // 循环判断是否已经完成全部上传
        if (fileList2.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const subsidy = []
        for (let i = 0; i < fileList2.length; i++) {
          subsidy.push(fileList2[i].url)
        }
        this.attestation.subsidy = subsidy.toString(',')
        // 读取上传组件的数据
        const fileList3 = this.$refs.requirements.fileList
        // 循环判断是否已经完成全部上传
        if (fileList3.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const requirements = []
        for (let i = 0; i < fileList3.length; i++) {
          requirements.push(fileList3[i].url)
        }
        this.attestation.requirements = requirements.toString(',')
        // 读取上传组件的数据
        const fileList4 = this.$refs.teachers.fileList
        // 循环判断是否已经完成全部上传
        if (fileList4.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const teachers = []
        for (let i = 0; i < fileList4.length; i++) {
          teachers.push(fileList4[i].url)
        }
        this.attestation.teachers = teachers.toString(',')

        if (this.attestation.application_form === '') {
          this.$message.error('基地申请表不能为空！')
          return
        }
        if (this.attestation.tax_revenue === '') {
          this.$message.error('税收完税证明不能为空！')
          return
        }
        if (this.attestation.subsidy === '') {
          this.$message.error('生活补贴发放明细不能为空！')
          return
        }
        await this.$confirm('确认资料已上传完毕了吗？')
        await AttestationAdd(this.attestation)
        this.getAttestation()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 取消
    btnCanle() {
      this.formData.name = ''
      this.formData.id = undefined
      this.formData.descr = ''
      this.showDialog = false
    },
    // 获取系统设置
    async getMenu() {
      var param = {
        id: 1
      }
      const { list } = await GetAdminSet(param)
      this.adminInfo = list
      const endIndex = list.application_form.lastIndexOf('.')
      const fileName = list.application_form.substring(endIndex)
      this.imgUrl = { url: list.application_form, name: fileName }
    },
    // 给图片赋值
    openDialog() {
      if (this.attestation.application_form) {
        const imgUrl = this.attestation.application_form.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.application_form.fileList = NewArr
      }
      if (this.attestation.tax_revenue) {
        const imgUrl = this.attestation.tax_revenue.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.tax_revenue.fileList = NewArr
      }
      if (this.attestation.subsidy) {
        const imgUrl = this.attestation.subsidy.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.subsidy.fileList = NewArr
      }
      if (this.attestation.teachers) {
        const imgUrl = this.attestation.teachers.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.teachers.fileList = NewArr
      }
      if (this.attestation.requirements) {
        const imgUrl = this.attestation.requirements.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.requirements.fileList = NewArr
      }
    }
  }
}
</script>
<style scoped lang="scss">
.black73-zt{color:#909399;font-weight: normal;}
  .card_top30{margin-top: 30px;}
  .shopOrder-dialog{
  height: 760px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.fujian-box{
  margin-top: 30px;
  padding-bottom: 50px;
  label{
    font-size: 15px;
    font-weight: bold;
  }
  .item-xbox{
    flex-wrap: wrap;
  }
  .item-fujian{
    margin-top: 20px;
    margin-right: 10px;
    width: 10%;
    flex-direction: column;
    .item-img{
      width: 70%;
      img{
        width: 100%;
      }
    }
  }
  .item-title{
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
  }
}
.a-top{
  display: flex;
  align-items: flex-start;
}
.btn_ljm_box{
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label_title{
  margin-left: 10px;
}
</style>
